<template>
    <div class="template-list">
        <div class="template-item" v-for="item in renderList" :key="item">
            <div class="template-item__image">
                <var-image :src="item.file +
                    '?x-oss-process=image/resize,w_690/watermark,image_' +
                    toBase64(
                        'water/logo_white.png?x-oss-process=image/resize,P_30'
                    ) +
                    ',g_center,t_60'
                    " fit="cover" @click.stop="item.url ? onPreview(item) : ''" lazy ripple alt="北京华锐云空间" />

                <img class="free-icon" v-if="item.templatestype_code == 'courseware'"
                    :src="`${_oss_}images/free-icon.png`" />
            </div>

            <div class="template-item__info">
                <div class="template-item__top">
                    <div class="template-item__title">{{ item.name }}</div>
                    <var-button class="template-item__btn" type="primary" :class="{
                        disabled: !item.url,
                    }" @click.stop="item.url ? onMakeModel(item) : ''">
                        {{ item.is_buy == 1 ? "开始创作" : "免费制作" }}
                    </var-button>
                </div>
                <div class="template-item__bottom" v-if="item.templatestype_code != 'firefighting' &&
                    item.templatestype_code != 'zhanjiang' &&
                    item.templatestype_code != 'xiamen' &&
                    item.templatestype_code != 'yejin' &&
                    item.templatestype_code != 'shuju' &&
                    item.templatestype_code != 'yiliao' &&
                    item.templatestype_code != 'shuiwu'
                    ">
                    <div class="template-item__icon">
                        <template v-if="item.templatestype_code == 'template'">
                            <div class="icon-item">
                                <img :src="`${_oss_}images/template/icon-area.svg`" />
                                {{ item.area }}m²
                            </div>
                        </template>
                        <div class="icon-item">
                            <img :src="`${_oss_}images/template/icon-eye.svg`" />
                            {{ item.page_view }}
                        </div>

                        <div class="sales-volume">已销售：{{ item.sales }}</div>
                    </div>
                    <var-button class="template-item__btn" :class="{
                        disabled: !item.url,
                    }" :type="item.is_buy == 1 ? 'warning' : 'primary'" @click="item.url ? onBuyModel(item) : ''"
                        v-if="IsNeedPay(item)">
                        {{ item.is_buy == 1 ? "可升级" : "购买" }}
                    </var-button>
                </div>
            </div>
        </div>
    </div>
    <PageSeeMoreM v-if="props.seeMore &&
        props.list.length > pagination.size * pagination.page
        " @next="pagination.page += 1" />
</template>
<script setup>
import { onMakeModel, onPreview, IsNeedPay, onBuyModel } from ".";
const props = defineProps({
    list: {
        type: Array,
        default: () => [],
    },
    seeMore: {
        type: Boolean,
        default: true,
    },
});

const pagination = reactive({
    size: 10,
    page: 1,
});

const renderList = computed(() => {
    if (props.seeMore) {
        return props.list.slice(0, pagination.page * pagination.size);
    } else {
        return props.list;
    }
});
</script>
<style lang="scss" scoped>
.template-list {
    padding: 0 15px 15px;

    .template-item {
        width: 345px;
        height: 225px;
        margin-bottom: 15px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;

        &:last-of-type {
            margin-bottom: 0;
        }

        &__image {
            position: relative;
            width: 345px;
            height: 150px;

            .var-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .free-icon {
                position: absolute;
                top: 0;
                right: 0;
            }
        }

        &__info {
            padding: 5px 10px 8px 10px;
        }

        &__top {
            display: flex;
            align-items: center;
            height: 25px;
        }

        &__bottom {
            display: flex;
            align-items: center;
            margin-top: 12px;
            height: 25px;
        }

        &__icon {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;

            .icon-item {
                display: flex;
                align-items: center;
                margin-right: 10px;

                img {
                    width: 12px;
                    margin-right: 2px;
                }
            }
        }

        &__title {
            width: 250px;
            font-size: 15px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &__btn {
            width: 70px;
            height: 25px;
            padding: 0;
            border-radius: 3px;
            font-size: 14px;
            line-height: 1em;
            margin-left: auto;
            box-shadow: none;

            &.disabled {
                opacity: 0.5;
            }
        }
    }
}
</style>
